import _ from 'lodash';

export const titles = ['电价分布图', '全省供需图'];

export const dateTypes = [
  { label: '按月', value: 'month' },
  { label: '按年', value: 'year' },
];

// 基础配置
const baseOption = {
  grid: { top: 36, right: 20, bottom: 20, left: 50 },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    nameGap: 8,
    axisLabel: { color: 'rgba(255, 255, 255, 0.6)' },
    axisLine: { onZero: false, lineStyle: { color: 'rgba(255, 255, 255, 0.25)' } },
    axisTick: {
      alignWithLabel: true,
      length: 4,
      lineStyle: { color: 'rgba(255, 255, 255, 0.25)' },
    },
    splitLine: { show: false },
  },
  yAxis: {
    type: 'value',
    nameGap: 8,
    nameTextStyle: { color: 'rgba(255, 255, 255, 0.6)' },
    axisLabel: { color: 'rgba(255, 255, 255, 0.6)' },
    axisLine: { show: false },
    axisTick: { show: false },
    splitLine: { lineStyle: { color: 'rgba(255, 255, 255, 0.1)' } },
  },
  legend: {
    height: 24,
    itemGap: 16,
    itemWidth: 8,
    itemHeight: 3,
    textStyle: {
      fontSize: 12,
      lineHeight: 16,
      color: 'rgba(255, 255, 255, 0.9)',
    },
    padding: 0,
    borderColor: 'rgba(255, 255, 255, 0.6)',
    inactiveColor: 'rgba(255, 255, 255, 0.6)',
    inactiveBorderWidth: 0,
  },
  tooltip: {
    show: true,
    confine: true,
    enterable: false,
    trigger: 'axis',
    axisPointer: { type: 'line' },
    backgroundColor: '#071E36',
    borderColor: '#0C5185',
    borderWidth: 1,
    padding: [12, 12],
    textStyle: { fontSize: 12, lineHeight: 20, color: 'rgba(255, 255, 255, 0.60)' },
  },
};

export const getOption = (list, _series, unit) => {
  const option = _.cloneDeep(baseOption);
  option.dataset = {
    source: list,
    dimensions: ['id', ..._series.map((x) => x.key)],
  };
  option.series = _series.map((x) => {
    let temp = {
      name: x.name,
      type: 'line',
      symbol: 'none',
      itemStyle: { color: x.color, lineStyle: { width: 2 } },
      emphasis: { lineStyle: { width: 2 } },
    };
    if (!x.noArea) {
      temp.areaStyle = { opacity: 0.1 };
    }
    if (!!x.stack) {
      temp.stack = x.stack;
      temp.areaStyle = { opacity: 1 };
    } else {
      temp.z = 10;
    }
    return temp;
  });
  option.legend.data = _series.map((x) => ({
    name: x.name,
    itemStyle: { opacity: 0 },
    lineStyle: { color: x.color, width: 3 },
  }));
  option.legend.top = 10;
  option.legend.left = _series.length > 2 ? 120 : 290;
  if (!!unit) {
    option.yAxis.name = `单位：${unit}`;
  }
  return option;
};
